<style lang="less">
.simple-mask {
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  z-index: 8500;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
  &-enter,
  &-leave-active {
    opacity: 0;
  }

  &-box {
    position: absolute;
  }
  &-center {
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
  }
  // vue 动画class
  &-enter &-center {
    transform: scale(0.7);
  }
  &-leave-active &-center {
    transform: scale(0.9);
  }

  &-bottom {
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.2s linear;
  }

  &-enter &-bottom,
  &-leave-active &-bottom {
    transform: translate3d(0, 100%, 0);
  }
}
</style>
<template>
  <transition name="simple-mask">
    <div class="simple-mask" v-show="showMask" @click="close(-1)">
      <div :class="['simple-mask-box', 'simple-mask-' + type]" @click="stopClick">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    // 点击蒙版，触发关闭弹窗
    maskHide: {
      type: Boolean,
      default: true
    },
    // 类型
    type: {
      type: String,
      default: 'center'
    },
    // ** 该参数 应来自顶层组件的传递,免去弹窗展示与否需要一层层传递
    showMask: {
      type: Boolean,
      default: false
    },
    autoStop: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  created() {
    // console.log(this.showMask)
  },
  methods: {
    // 关闭弹窗方法
    // index 是按钮的 index 值
    close: function(index) {
      if (!this.maskHide && index == -1) {
        return
      }
      this.$parent.showCurrentMask = false // 只有两层就把父级关掉即可
    },
    stopClick(event) {
      if (this.autoStop) {
        event.stopPropagation()
      }
    }
  }
}
</script>
